// Global Variables
// -------------------------------------
// Typography
// -------------------------------------
@baseFontSize:                 11px;
@baseFontFamily:               "Open Sans";
@baseFontWeight:               500; //400 OJO
@baseLineHeight:               11px; //igual a @baseFontSize
@baseSize:                     5px; //6px menos que @baseLineHeigth 

// Component height
@baseHeight:                   @baseSize;
@smallIconHeight:              @baseHeight * 2; // 16px
@iconHeight:                   @baseHeight * 4; // 24px OJO
@buttonHeight:                 @baseHeight * 4; // 32px
@barHeight:                    @baseHeight * 5; // 40px
@headerHeight:                 @baseHeight * 6; // 48px

// Component width
@baseWidth:                    @baseSize;
@smallIconWidth:               @baseWidth * 2; // 16px
@iconWidth:                    @baseWidth * 4; // 24px OJO
@buttonWidth:                  @baseWidth * 4; // 32px
@barWidth:                     @baseWidth * 5; // 40px
@headerWidth:                  @baseWidth * 6; // 48px

// Component padding
@paddingSize:                  8px;
@paddingLarge:                 @paddingSize * 2;
@paddingSmall:                 @paddingSize / 2;

// -------------------------------------
// Component sizing
// -------------------------------------
// Font Family
@titleFontFamily:          "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@contentFontFamily:        "Open Sans", Arial, Sans-serif;

// Font Size (based on 14px and 20px line-height)
@fontSizeXLarge:               ceil(@baseFontSize * 1.25);  // 18px
@fontSizeLarge:                floor(@baseFontSize * 1.15); // 16px
@fontSizeMedium:               ceil(@baseFontSize * 0.85);  // 12px
@fontSizeSmall:                floor(@baseFontSize * 0.8);  // 11px
@fontSizeXSmall:               ceil(@baseFontSize * 0.7);   // 10px

// Font Weight
@fontWeightLight:              400; //300 OJO
@fontWeightSemiBold:           600;
@fontWeightBold:               700;

@basePopupZIndex:              88000;

// -------------------------------------
// Component Basic Coloring
// -------------------------------------
// Basic coloring
@white:                        #FFFFFF;
@grayLighter:                  #F5F5F5;
@grayLight:                    #EBEBEB;
@gray:                         #E3E3E3;
@grayDrak:                     #ACACAC;
@grayDarker:                   #555555;
@blackLight:				   #001428;

@blueLighter:                  #5687A8;
@blueLight:                    #4C7895;
@blueModerate:                 #436983;
@blue:                         #3A5B72;
@blueDark:                     #314D60;
@blueDarker:                   #29404F;

@red:                          #AE312E;
@orange:                       #CC6D33;
@green:                        #59A755;

// Font color
@baseTextColor:                @grayDarker;

// Border color
@baseBorderColor:              @gray;

// Background color
@baseBackground:               @white;

// -------------------------------------
// Icon font color (used for font-awesome)
// -------------------------------------
@iconSize:                     12px;
@iconColor:                    @grayDrak;

// -------------------------------------
// Button (used for button, combobutton, toolbarbutton)
// -------------------------------------
@buttonColor:                  @white;
@buttonBorderColor:            @blueLighter;
@buttonBackground:             @blueLighter;
@toolbarButtonColor:           @blueLighter;
@comboButtonBorderColor:       @blueLight;

// -------------------------------------
// Input (used for textbox, intbox, spinner, ...)
// -------------------------------------
@inputColor:                   @grayDarker;
@inputBorderColor:             @baseBorderColor;
@inputBackground:              @baseBackground;
@inputDisabledColor:           @grayDrak;
@inputDisabledBackground:      #F2F2F2;

// -------------------------------------
// Mesh Table (used for grid, listbox, tree, biglistbox)
// -------------------------------------
@meshTitleColor:               @white;
@meshTitleFontSize:            11px;  //1px mas que @baseFontSize
@meshTitleBorderColor:         @white;
@meshTitleBackground:          @blueDark;
@meshMenuHoverBackground:      darken(@blueDark, 5%);
@meshStripeBackground:         @white;
@meshFootBackground:           @grayLight;
@meshEmptyColor:               @grayDrak;
@meshDisabledColor:            @grayDrak;
@meshDisabledBackground:       @white;

// -------------------------------------
// Component State base on Button
// -------------------------------------
// Active
@activeColor:                  @white;
@activeBorderColor:            @blueLight;
@activeBackground:             @blueLight;
@activeShadowColor:            @blue;

// Focus
@focusColor:                   @white;
@focusBorderColor:             @blueModerate;
@focusBackground:              @blueModerate;

// Hover
@hoverColor:                   @white;
@hoverBorderColor:             #5E94B8;
@hoverBackground:              #5E94B8;
@hoverShadowColor:             @blueModerate;

// Disabled
@disabledColor:                @grayDrak;
@disabledBorderColor:          @gray;
@disabledBackground:           @gray;
@disabledOpacity:              1;

// -------------------------------------
// Component State base on Input
// -------------------------------------
// Invalid
@invalidBorderColor:           @red;
@invalidBackground:            @baseBackground;

// Read-only
@readonlyBorderColor:          @baseBorderColor;
@readonlyBackground:           @grayLighter;

// -------------------------------------
// Component State base on MeshTable
// -------------------------------------
// Selected (used on listbox, tree, comboitem)
@selectedColor:                @grayDarker;
@selectedBorderColor:          @baseBorderColor;
@selectedBackground:           @grayLighter;

// Selected Hover (used on listbox, tree, comboitem)
@selectedHoverColor:           @white;
@selectedHoverBorderColor:     @baseBorderColor;
@selectedHoverBackground:      @blueLighter;

// Checked (used on menuitem, listbox, tree, toolbarbutton)
@checkedSize:                  17px;
@checkedFontSize:              11px;
@checkedColor:                 @blueLighter;
@checkedBorderColor:           @gray;
@checkedBackground:            @white;

// -------------------------------------
// Component independent variables
// -------------------------------------
// mask and loading
@maskBackground:               #E0E1E3;
@loadingColor:                 @grayDrak;
@loadingFontSize:              24px;
@loadingBackground:            @white;

// scrollbar
@scrollbarWidth:                 16px;
@scrollbarHeight:                16px;
@scrollbarBorderColor:           @white;
@scrollbarBackground:            @blueLighter;
@scrollbarRailBackground:        @white;
@scrollbarButtonBackground:      @white;
@scrollbarButtonHoverBackground: @blueLighter;
@scrollbarButtonColor:           @blueLighter;
@scrollbarButtonHoverColor:      @white;
@scrollbarIconDisplay:           none;

// drag and drop
@dragColor:                    @white;
@dragBackground:               @grayDrak;
@dragHoverBackground:          @blueLighter;
@dragAllowBackground:          @green;
@dragDisAllowBackground:       @orange;

// splitter (hbox, vbox, borderlayout)
@splitterBackground:           @grayLight;
@splitterHoverBackground:      @gray;

// calendar
@calendarTitleColor:           @white;
@calendarTitleBorderColor:     @blue;
@calendarTitleBackground:      @blueDark;
@calendarTitleHoverBackground: @blueDarker;
@calendarSelectedColor:        @blueLighter;
@calendarSelectedBackground:   @white;
@calendarWeekBackground:       @grayLight;
@calendarWeekendColor:         @grayDarker;
@calendarWeekendBackground:    @white;
@calendarOutRangeColor:        @grayDrak;
@calendarOutRangeBackground:   @white;
@calendarWeekofyearColor:      @grayDrak;
@calendarWeekofyearBackground: @grayLight;

// popup
@popupColor:                   @white;
@popupBackground:              @blueLighter;

// group (groupbox, group, listgroup)
@groupBorderColor:             @blueLighter;
@groupBackground:              @gray;
@groupFootBackground:          @grayLight;

// paging
@pagingColor:                  @grayDarker;
@pagingIconColor:              @blueLighter;
@pagingHoverColor:             @white;
@pagingActiveColor:            @white;
@pagingSelectedColor:          @blueLighter;
@pagingBorderColor:            transparent;
@pagingSelectedBorderColor:    transparent;
@pagingBackground:             @grayLight;
@pagingButtonBackground:       @white;
@pagingSelectedBackground:     @white;

// slider
@sliderBackground:             @grayDrak;
@sliderButtonBackground:       @blueModerate;

// errorbox (input constraint)
@errorboxColor:                @white;
@errorboxBorderColor:          @red;
@errorboxBackground:           @red;

// notification
@notificationColor:            @white;
@notificationInfoColor:        @green;
@notificationWarningColor:     @orange;
@notificationErrorColor:       @red;
@notificationArrowColor:       rgb(51, 51, 51);

// progressmeter
@progressmeterBackground:      @blueLighter;

// window
@windowTitleFontSize:          20px;
@windowTitleColor:             @blackLight; //@grayDrak; OJO
@windowBorderColor:            @gray; 
@windowBackground:             @white;

// panel
@panelTitleFontSize:           20px;
@panelTitleColor:              @grayDrak;

// menu
@menuImageSize:                14px;
@menuColor:                    @white;
@menuBackground:               @blueLighter;
@menuHoverColor:               @blueLighter;
@menuHoverBackground:          @white;
@menuActiveColor:              @blueLighter;
@menuActiveBackground:         @white;
@menuDisabledColor:            @grayDrak;
@menuSeparatorBorderColor:     @white;
@menuSeparatorBackground:      @blueLighter;

@menuPopupColor:               @grayDrak;
@menuPopupBackground:          @white;
@menuPopupHoverColor:          @white;
@menuPopupHoverBackground:     @blueLighter;
@menuPopupActiveColor:         @white;
@menuPopupActiveBackground:    @blueLighter;
@menuPopupSeparatorBorder:     @white;
@menuPopupSeparatorBackground: @white;

// navbar
@navImageSize:                 14px;
@navColor:                     @white;
@navBorderColor:               transparent;
@navBackground:                @blueLighter; //first level, each level is 5.6% darker (darken(@navBackground, 5.6 * level))
@navHoverColor:                @blueLighter;
@navHoverBackground:           @white;
@navSelectedColor:             @blueLighter;
@navSelectedBackground:        @white;
@navSelectedHoverColor:        @blueLighter;
@navSelectedHoverBackground:   @white;
@navInfoBackground:            @blueModerate;
@navSeparatorBackground:       @blueLight;
@navCollapsedWidth:            40px;

// biglistbox
@biglistboxBackground:         @white;
@biglistboxFrozenBackground:   #E0E0E0;

// chosenbox
@chosenboxColor:               @white;
@chosenboxBackground:          @blueLighter;
@chosenboxHoverColor:          @blueLighter;
@chosenboxHoverBackground:     @white;
@chosenboxCreateColor:         @green;

// tabbox
@tabFontSize:                  13px;
@tabColor:                     @white;
@tabHoverColor:                @blueLighter;
@tabSelectedColor:             @blueLighter;
@tabDisabledColor:             @white;
@tabBackground:                @blueLighter;
@tabHoverBackground:           @blueLight;
@tabDisabledBackground:        @grayDrak;
@accordionSelectedColor:       @white;
@accordionSelectedBackground:  @blueLighter;
